<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <span v-for="num in arr1">{{num}}</span>
    <br>
    <p v-for="phone in arr2">{{phone.name}}-{{phone.price}}</p>
    <p>第一种情况：通过数组下标修改一整项。</p>
    <p>第二种情况：通过length直接修改数组。</p>
    <p>第一种解决方案：splice</p>
    <p>第二种解决方案：vm.$set(目标数组，下标，新的值)/Vue.set(目标数组，下标，新的值)</p>
    <hr>
    <p>vue监听对象的变化</p>
    <p v-for="(val, key, index) in obj1">{{index+1}}.{{key}}: {{val}}</p>
    <p>对象修改：增删改。增删vue无法监听，修改可以监听</p>
    <p>对象新增属性：vm.$set(obj1,key,val)</p>
    <p>对象删除属性：Vue.delete(obj1, key)</p>
    <hr>
    <p>过滤和排序</p>
    <p v-for="(book,index) in booksFilter" :key="index">{{book.name}}.{{book.author}}</p>
    <p>以下是排序:</p>
    <p v-for="(book,index) in booksSort" :key="index+'o'">{{book.name}}.{{book.author}}</p>
    <hr>
    <p>绑定事件</p>
    <button @click="handlerClick('abcd',$event)">click</button>
    <a href="./0328chat.html" @click="handlerA('./0328chat.html', $event)">0328chat.html</a>
    <form action="" method="get">
      <input type="text" name="user" @keyup="submit(454,$event)">
      <input type="hidden" value="fs8d78s7d5" data-attr="20200331" class="userid">
    </form>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        arr1: [1,2,3,4,5],
        arr2: [
          {
            name: 'iphone 11',
            price: 9999
          },
          {
            name: 'iphone 10',
            price: 9991
          },
          {
            name: 'iphone 09',
            price: 9992
          }
        ],
        books: [
          {name: 'HTML', author: 'AAA'},
          {name: 'CSS', author: 'BBB'},
          {name: 'JS', author: 'CCC'},
          {name: 'VUE', author: 'YouYuXi'},
          {name: 'VUE', author: 'xxxx'}
        ],
        obj1: {
          name: 'iphone 09',
          price: 9992
        }
      },
      computed: {
        booksFilter: function() {
          return this.books.filter(book => {
            return book.name.match(/VUE/)
          })
        },
        booksSort: function() {
          return this.books.sort(function(a,b) {
            return a.name.length - b.name.length
          })
        }
      },
      methods: {
        handlerClick(num,e) {
          console.log(num)
          console.log(e)
        },
        handlerA(target,e) {
          console.log(target)
          event.preventDefault()
        },
        submit(num, e) {
          console.log(num)
          event.preventDefault()
        }
      },
    })
  </script>
</body>
</html>